const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path');
module.exports = {
  entry: '/src/main.js',
  output: {
    filename: '[name][hash:8].bundle.js',
    path: path.join(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new htmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: path.join(__dirname, 'public/index.html')
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      // {
      //   test: /\.css/,
      //   use: ['style-loader', 'css-loader']
      // },
      {
        test: /\.(less|css|scss)$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|gif)$/,
        use: [
          // 'file-loader',
          {
            loader: 'url-loader',
            options: {
              limit: 5 * 1024, // 10 KB,
              name: '[name].[hash:7].[ext]',
              esModule: false
            }
          }]
      },
    ]

  }
}